<script>
import GlobalFilterListener from './GlobalFilterListener.vue'

export default {
  name: 'trend-of-output-index',
  mixins: [GlobalFilterListener],
  data () {
    return {
      data: [],
    }
  },
  computed: {
    chartOption () {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.4)'
            }
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(28,70,94,0.8)'
            }
          },
          data: Array(12).fill(1).map((v, i) => `${i + 1}月`),
        },
        grid: {
          bottom: '20px',
          top: '16px',
          right: '2%',
          left: '2%',
          containLabel: true,
        },
        textStyle: {
          color: '#ffffff'
        },
        series: [
          {
            type: 'line',
            smooth: true,
            name: '产值单耗',
            symbol: 'circle',
            symbolSize: 10,
            showSymbol: false,
            itemStyle: {
              color: '#31a4fd'
            },
            lineStyle: {
              color: 'rgb(0,96,251)'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1, color: 'rgba(0,96,251,0.1)'
                }, {
                  offset: 0, color: 'rgb(0,96,251)'
                }],
              },
            },
            data: this.data
          },
        ],
      }
    },
  },
  mounted () {
    this.rand()
  },
  methods: {
    rand () {
      this.data = Array(12).fill(1).map(v => (Math.random() * 3000).toFixed(2))
    },
    eventBusHandler () {
      this.rand()
    },
  },
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <i class="item-icon i-custom:quanyipeizhi"></i>
      <div class="head-title">
        <h3 class="primary-title">产值指标趋势</h3>
        <p class="secondary-title">Trend of output index</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content" ref="container">
        <v-chart ref="chart" :option="chartOption" style="width: 100%; height: 200px;"></v-chart>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>
